<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
       .fix{
         position: fixed;
         top:200px;
         width: 100px;
         height: 100px;
         background-color: cadetblue;
       }
       .parent{
         width: 90vw;
         height: 100vh;
         background-color: lightgreen;
         overflow-y: auto;
         border:1px solid grey;
       }
       .son{
        width: 20vw;
        height: 10000px;
        background-color: lightsalmon;
       }
    </style>

  </head>
  <body>
     
    <div class="parent" id="parent">
      <div class="son" id="son">

      </div>
    </div>
    <div class="fix" id="fix">
      固定布局
    </div>
    <script> 
      parent.addEventListener("click",  printMouse)
      function printMouse(e){
        console.log("窗口可视区域", e.clientX, e.clientY);
        console.log("文档区域", e.pageX, e.pageY);
        
        // console.log("窗口可是区域", e.clientX, e.clientY);

      }

    var son = document.querySelector("#son");
    son.addEventListener("scroll", function(e){
       console.log("滚动距离", e.scrollTop)
     })
     parent.addEventListener("scroll", function(e){
       console.log("滚动距离", e.scrollTop)
     })
     
     // 距离最近的非relative 的父级的距离
     fix.addEventListener("click", function(e){
       console.log(e.offsetX, e.offsetY)
     })
    </script>
  </body>
</html>